<template>
	<view>
		<view class="pro_info">
			<image mode="aspectFill" class="pro_img" :src="pro_info.image.file_path"></image>
			<view class="pro_name">
				<view>{{pro_info.product_name}}</view>
				<view style="color: #ccc;font-size: 26rpx;">{{pro_info.product_attr}}</view>
			</view>
			<view class="pro_status">待使用</view>
		</view>
		<!--   -->
		<view class="address">
			<view class="title">
				取件
			</view>
			<view class="hr">

			</view>
			<view style="padding:10rpx 0;overflow: hidden;">
				<view v-if="order_address == ''" class="list" @click="getAddress()">
					<view class="left_copy">地址</view>
					<image mode="aspectFit"
						src="https://jiechendy.sdshengyue.cn/uploads/de/5e670f8c5da413a491948334b5c65a.png"
						class="right"></image>
				</view>
				<view v-else class="list_copy" @click="getAddress()">
					<view>
						<view class="">
							{{order_address}}
						</view>
						<view class="" style="color: #ccc;font-size: 26rpx;margin-top: 10rpx;">
							{{order_name}} {{order_phone}}
						</view>
					</view>
					<image mode="aspectFit"
						src="https://jiechendy.sdshengyue.cn/uploads/de/5e670f8c5da413a491948334b5c65a.png"
						class="right"></image>
				</view>
				<view class="list" @click="gotoPage('/pages/order/time')">

					<view class="left" v-if="order_date == ''">时间</view>
					<view class="left" style="width: 50%;" v-else>时间</view>
					<view class="left1" v-if="order_date == ''"></view>
					<view class="left1" v-else style="color: #000;width: 50%;">{{order_date}} {{order_time}}</view>
					<image mode="aspectFit"
						src="https://jiechendy.sdshengyue.cn/uploads/de/5e670f8c5da413a491948334b5c65a.png"
						class="right"></image>
				</view>
				<view class="list" @click="gotoPage('/pages/order/textarea')">
					<view class="left">备注</view>
					<view class="left1">{{tips}}</view>
					<image mode="aspectFit"
						src="https://jiechendy.sdshengyue.cn/uploads/de/5e670f8c5da413a491948334b5c65a.png"
						class="right"></image>
				</view>
				<view class="text" v-if="tips==''">
					<textarea class="text_class" v-model="text"></textarea>
				</view>
			</view>
		</view>
		<view class="address">
			<view class="title">
				送回
			</view>
			<view class="hr">

			</view>
			<view style="padding:10rpx 0;">
				<view class="list">
					<view class="left_copy1">送回地址</view>
					<radio-group @change="getAdress" style="height: 60rpx;line-height: 60rpx;font-size: 26rpx;">
						<radio value="r1" checked="true" color="#256bc6" /><span class="s1">同取件地址</span>
						<radio value="r2" color="#256bc6" />新地址
					</radio-group>
				</view>
				<block v-if='address_show == true'>
					<view v-if="j_address == ''" class="list" @click="getAddress1()">
						<view class="left_copy">地址</view>
						<image mode="aspectFit"
							src="https://jiechendy.sdshengyue.cn/uploads/de/5e670f8c5da413a491948334b5c65a.png"
							class="right"></image>
					</view>
					<view v-else class="list_copy" @click="getAddress1()">
						<view>
							<view class="">
								{{j_address}}
							</view>
							<view class="" style="color: #ccc;font-size: 26rpx;margin-top: 10rpx;">
								{{j_name}} {{j_phone}}
							</view>
						</view>
						<image mode="aspectFit"
							src="https://jiechendy.sdshengyue.cn/uploads/de/5e670f8c5da413a491948334b5c65a.png"
							class="right"></image>
					</view>
				</block>
			</view>
		</view>
		<view class="btn" :disabled="callBtn" @click="callNow()">
			现在呼叫
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_id: '',
				pro_info: '',
				text: '',
				tips: '（选填）',
				address_show: false,
				order_address: '',
				order_name: '',
				order_phone: '',
				order_date: '',
				order_time: '',
				order_timeId: '',
				order_store_name: '',
				order_store_id: '',
				province_id: '',
				city_id: '',
				region_id: '',
				user_id: '',
				j_address: '',
				j_name: '',
				j_phone: '',
				jd_time: '',
				longitude: '',
				latitude: '',
				callBtn: false
			};
		},
		methods: {
			getData() {
				let self = this
				self._get('user.order/detail', {
						order_id: self.order_id,
						pay_source: self.getPlatform()
					},
					function(res) {
						self.pro_info = res.data.order.product[0]
					}
				);
			},
			gotoPage(url) {
				uni.navigateTo({
					url: url
				})
			},
			getAddress() {
				uni.navigateTo({
					url: '/pages/order/address/getAddress'
				})
			},
			getAddress1() {
				uni.navigateTo({
					url: '/pages/order/address/getAddress1'
				})
			},
			getAdress(adress) {
				if (adress.detail.value == 'r1') {
					this.address_show = false
				} else {
					this.address_show = true
				}
			},


			callNow() {
				let self = this

				if (self.order_address == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择地址'
					})
					return false
				}
				if (self.jd_time == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择时间'
					})
					return false
				}
				uni.showLoading({
					title: '呼叫中'
				})
				if (this.address_show == false) {
					self.callBtn = true
					self._post('order.order/jd_order_wx', {
							order_id: self.order_id,
							user_id: self.user_id,
							province_id: self.province_id,
							city_id: self.city_id,
							region_id: self.region_id,
							type: 0,
							detail: self.order_address,
							name: self.order_name,
							phone: self.order_phone,
							j_detail: self.order_address,
							j_name: self.order_name,
							j_phone: self.order_phone,
							jd_time: self.jd_time,
							longitude: self.longitude,
							latitude: self.latitude
						},
						function(res) {
							if (res.msg == '预约成功') {
								uni.hideLoading()
								uni.reLaunch({
									url: '/pages/order/order-detail?order_id=' + self.order_id
								})
							}
						}
					);
				} else {
					self.callBtn = true
					self._post('order.order/jd_order_wx', {
							order_id: self.order_id,
							user_id: self.user_id,
							province_id: self.province_id,
							city_id: self.city_id,
							region_id: self.region_id,
							type: 1,
							detail: self.order_address,
							name: self.order_name,
							phone: self.order_phone,
							j_detail: self.j_address,
							j_name: self.j_name,
							j_phone: self.j_phone,
							jd_time: self.jd_time,
							longitude: self.longitude,
							latitude: self.latitude
						},
						function(res) {
							if (res.msg == '预约成功') {
								uni.hideLoading()
								uni.reLaunch({
									url: '/pages/order/order-detail?order_id=' + self.order_id
								})
							}
						}
					);
				}

			}
		},
		onShow() {
			this.user_id = uni.getStorageSync('user_id')
			console.log('user_id', this.user_id);
		},
		onLoad(options) {
			this.order_id = options.id
			console.log(this.order_id,'this.order_id2');
			this.getData()
			uni.$on('tips', (data) => {
				this.text = data.text
				if (this.text != '') {
					this.tips = ''
				}
			});
			uni.$on('address', (data) => {
				this.order_address = data.address
				this.order_name = data.name
				this.order_phone = data.phone
				this.province_id = data.province_id
				this.city_id = data.city_id
				this.region_id = data.region_id
				this.longitude = data.longitude
				this.latitude = data.latitude

			});
			uni.$on('address1', (data) => {
				this.j_address = data.address
				this.j_name = data.name
				this.j_phone = data.phone
			});
			uni.$on('time', (data) => {
				this.order_date = data.check_date
				this.order_time = data.check_time
				this.jd_time = this.order_date + ' ' + this.order_time
				this.order_timeId = data.check_time
				console.log(data, 'data');
			});
			uni.$on('store', (data) => {
				this.order_store_name = data.store_name
				this.order_store_id = data.store_id
				console.log(data, 'data');
			});
		},
	}
</script>

<style lang="scss">
	page {}

	.btn {
		width: 90%;
		margin-left: 5%;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		color: #fff;
		background-color: #2568BC;
		border-radius: 50rpx;
		margin-top: 100rpx;
	}

	.pro_info {
		// width: 100%;
		padding: 20rpx;
		// height: 300rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.pro_name {
		width: 400rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;

		view {
			width: 400rpx;
		}
	}

	.pro_img {
		margin: 0 20rpx;
		width: 130rpx;
		height: 100rpx;
	}

	.pro_status {
		color: #E96725;
	}

	.address {
		width: 100%;
		// height: 500rpx;
		border-radius: 20rpx;
		background-color: #fff;
		margin-top: 20rpx;

		.title {
			padding: 30rpx;
			color: #2568BC;
			font-size: 32rpx;
			font-weight: bold;
		}
	}

	.hr {
		background-color: #E6E6E6;
		width: 100%;
		height: 1rpx;
	}

	.list {
		width: calc(100% - 60rpx);
		padding: 10rpx 30rpx;
		display: flex;
		height: 60rpx;
	}

	.list_copy {
		width: calc(100% - 60rpx);
		padding: 10rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		// height: 60rpx;
	}

	.left {
		width: 70%;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 26rpx;
	}

	.left_get {
		width: 20%;
		height: 60rpx;
		line-height: 60rpx;
	}

	.left_copy {
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 26rpx;
	}

	.left_copy1 {
		width: 40%;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 26rpx;
	}

	.left1 {
		width: 30%;
		height: 60rpx;
		line-height: 60rpx;
		text-align: right;
		color: #E6E6E6;
	}

	.left1_get {
		width: 80%;
		height: 60rpx;
		line-height: 60rpx;
		text-align: right;
		color: #000;
	}

	.right {
		margin-top: 15rpx;
		width: 30rpx;
		height: 30rpx;
	}

	.text {
		width: 100%;
		// height: 300rpx;
		border-radius: 20rpx;
		padding: 0 30rpx;
	}

	.text_class {
		width: calc(100% - 60rpx);
		height: 250rpx;
		box-sizing: border-box;
		background-color: #faf8fb;
		border-radius: 10rpx;
		border: 1rpx solid #cacaca;
		padding: 20rpx;

	}

	.s1 {
		margin-right: 20rpx;
	}
</style>